import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { useRouter } from 'expo-router';
import { Fit, useRiveFile, RiveView } from '@rive-app/react-native';
import { type Metadata } from '../../shared/metadata';

function RiveGraphic() {
  const { riveFile, isLoading, error } = useRiveFile(
    require('../../../assets/rive/counter.riv')
  );

  if (isLoading) {
    return (
      <View style={styles.loadingContainer}>
        <Text>Loading...</Text>
      </View>
    );
  }

  if (error || !riveFile) {
    return (
      <View style={styles.errorContainer}>
        <Text>Error: {error ?? 'No file loaded'}</Text>
      </View>
    );
  }

  return <RiveView file={riveFile} fit={Fit.Contain} style={styles.rive} />;
}

export default function NavigationLifecycle() {
  const router = useRouter();

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Navigation Lifecycle Test</Text>
      <Text style={styles.description}>
        This screen has a Rive view. Navigate to another Rive screen and back to
        test lifecycle handling.
      </Text>
      <Text style={styles.steps}>
        1. This screen shows Rive graphics{'\n'}
        2. Tap button to go to QuickStart (another Rive screen){'\n'}
        3. Press Back to return here{'\n'}
        {'\n'}
        If the fix works, no crash should occur.
      </Text>

      <RiveGraphic />

      <TouchableOpacity
        style={styles.button}
        onPress={() => router.push('/QuickStart' as any)}
      >
        <Text style={styles.buttonText}>Go to QuickStart (has Rive)</Text>
      </TouchableOpacity>
    </View>
  );
}

NavigationLifecycle.metadata = {
  name: 'Navigation Lifecycle',
  description: 'Tests Android lifecycle handling during navigation (PR #46)',
} satisfies Metadata;

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff', padding: 16 },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 16, textAlign: 'center' },
  description: { fontSize: 16, color: '#666', marginBottom: 12 },
  steps: { fontSize: 14, color: '#333', backgroundColor: '#f5f5f5', padding: 16, borderRadius: 8, marginBottom: 16, lineHeight: 22 },
  button: { backgroundColor: '#6c5ce7', padding: 16, borderRadius: 8, alignItems: 'center', marginTop: 16 },
  buttonText: { color: '#fff', fontSize: 16, fontWeight: 'bold' },
  rive: { width: '100%', height: 200, backgroundColor: '#f0f0f0' },
  loadingContainer: { width: '100%', height: 200, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f0f0' },
  errorContainer: { width: '100%', height: 200, justifyContent: 'center', alignItems: 'center', backgroundColor: '#ffebee' },
});